<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <link href="asscerts/bootstrap-3.4.1-dist/css/bootstrap.css" rel="stylesheet">
    <script src="asserts/js/jquery-2.1.1.min.js"></script>
    <script src="asscerts/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<!--    &lt;!&ndash;线上 validator 校验 js 文件&ndash;&gt;
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
    &lt;!&ndash;线上支持中文校验 js 文件&ndash;&gt;
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/language/zh_CN.js"></script>-->
    <script src="asserts/js/vue.js"></script>
    <script src="asserts/js/index.js"></script>
    <link rel="stylesheet" href="asserts/css/index.css">
    <script>
        $(function () {
            $.ajax({
                url:"/taobei_web/cart/getCartSum",
                type:"get",
                dataType:"json",
                success:function (respBean) {
                    if (respBean.status == 200) {
                        $("#nums").html(respBean.data.nums);
                        $("#a2").html("欢迎你："+respBean.data.userName)
                        $("#a2").attr("data-target","12")
                        $(".gouwu").attr("data-target","12")
                        $(".gouwu").attr("onclick","check()")
                    }
                }
            })
            $(".qding").click(function () {
                $.ajax({
                    url:"/taobei_web/user/login",
                    data:{
                        tel:$("#recipient-name").val(),
                        password:$("#recipient-password").val()
                    },
                    type:"post",
                    dataType:"json",
                    success:function (respBean) {
                        if (respBean.status == 200) {
                            alert(respBean.msg);
                            location.href="userIndex2.html"
                        }else {
                            alert(respBean.msg)
                        }
                    }
                })
            })
        })
        function check() {
            location.href = "cart.html"
        }
    </script>
</head>
<style>
    .navbar-inverse{
        height: 35px;
        font-size: 6px;
    }
    #div1{
        /*border: red solid 1px;*/
        height: 80px;
        width: 910px;
        margin-left: 192px;
        margin-top: 40px;
    }
    #div2{
        overflow: hidden;
        /*border: red solid 1px;*/
        float: left;
        height: 80px;
        width: 150px
    }
    #div3{
        /*border: red solid 1px;*/
        float: left;
        margin-left: 20px;
        font-size: 18px;
        height: 80px;
        width: 350px;
        font-weight:500;
        color: #4a4a4a;
        padding-top: 25px;
        font-family:微软雅黑;
    }
    .span1{
        /* 鼠标移入变小手 */
        cursor: pointer;
    }
    .span1:hover{
        font-weight: bold;
    }
    .input1{
        /*border: red solid 1px;*/
        height: 80px;
        width: 300px;
        padding-top: 22px;
        float: right;
        color: #FFFFFF;

    }
    #button_id{
        float: right;
        width: 70px;
        height: 34px;
        background-color: #ff6e39;
        border: 0px;
        border-radius: 4px;
        box-shadow: 0px 0px 5px #888888;
    }
    #div4{
        margin-left: 190px;

        width: 910px;
        height: 250px;
        overflow: hidden;
    }
    #div5{
        /*border: red solid 1px;*/
        height: 50px;
        width: 150px;
        margin-left: 190px;
        font-size: 19px;
        padding-top: 12px;
    }
    #div6{
        margin-left: 190px;
        /*border: red solid 1px;*/
        width: 910px;
        height: 1000px;
        /* 鼠标移入变小手 */
        cursor: pointer;
    }
    #div4:hover{
        /*等比例放大*/
        /*transform: scale();*/
    }
    .div6_1{
        /*border: red solid 1px;*/
        border-top: #ff6e39 solid 2px;
        /*background-color: #fafafa;*/
        float: left;
        width: 200px;
        height: 300px;
        margin-left: 13px;
        margin-right: 13px;
        margin-bottom: 10px;
    }
    .div6_1:hover{
        transform: scale(1.02);
    }
    #a2{
        padding-top: 7px;
        margin-top: 0px;
        padding-right:0px;
        color: #eb9e9b
    }
    #a2:hover{
        color: #eb565f;
    }
</style>
<body>
    <div id="app">
        <nav class=" navbar-inverse navbar-fixed-top">
            <div class="container-fluid" >
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class=""><a href="#" style="padding-top: 0px;margin-top: 7px;margin-left: 150px">淘贝首页</a></li>
                        <li><a href="#" style="padding-top: 0px;margin-top: 7px">问题反馈</a></li>
                        <li><a href="#" style="padding-top: 0px;margin-top: 7px">卖家中心</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"  style="padding-top: 7px;margin-top: 0px;height: 35px;">商品分类 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">数码电子</a></li>
                                <li><a href="#">食品</a></li>
                                <li><a href="#">生活用品</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">服装 | 男装 | 女装</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">厨具用品</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#" @click="loginVisible = true"  id="a2" data-toggle="modal" data-target="#exampleModal">亲，请登录</a></li>
                        <li><a href="#" style="padding-top: 7px;margin-top: 0px;">注册</a></li>
                        <li><a href="#" class="gouwu"  data-toggle="modal" data-target="#exampleModal" id="a3" style="padding-top: 7px;margin-top: 0px;height: 35px;margin-right: 150px">购物车<span id="nums" style="color: #eb9e9b">0</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div id="div1">
            <div id="div2">
                <img src="asscerts/img/taobeilogo.jpg" style="height: 250px;margin-top: -85px;margin-left: -30px">
            </div>
            <div id="div3">
                <span class="span1">数码电子</span>
                <span style="margin-left: 10px" class="span1">生活用品</span>
                <span style="margin-left: 10px" class="span1">服装饰品</span>
                <span style="margin-left: 10px" class="span1">厨具用品</span>
            </div>
            <div class="form-group input1">
                <input type="text" class="form-control " style="width: 220px;float: left" placeholder="幸福生活，搜索一下" name="username" id="username">
                <input id="button_id" type="button" value="搜索" style="">
            </div>
        </div>
        <div id="div4">
            <iframe align="center" width="100%" height="100%" src="Demo01.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
        </div>
        <div id="content_body">
            <div id="div5">
                <span>数码品牌  ></span>
            </div>
            <div id="div6">
                <div class="div6_1" v-for="(item,index) in productList" @click="addProductId(item)">
                    <div>
                        <img src="asscerts/img/0b92f82917a9c400.jpg" style="width: 200px">
                    </div>
                    <div style="text-align: center; margin-top: -8px;font-size: 15px">{{item.name}}</div>
                    <div style="text-align: center;font-size: 10px;color: #88868d;margin-top: 5px"><p style="margin-bottom: 0;height: 25px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.context}}</p></div>
                    <div style="color: red;font-size: 15px;text-align: center">{{item.price}}</div>
                </div>
            </div>
        </div>


        <el-dialog
                title="提示"
                :visible.sync="loginVisible"
                width="30%"
                :before-close="handleClose">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
        </el-dialog>


        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">用户请登录</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">用户名:</label>
                                <input type="text" class="form-control" id="recipient-name">
                            </div>
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">密码:</label>
                                <input type="text" class="form-control" id="recipient-password">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary qding">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: '#app',
            data: {
                productList: [],
                name: '123',
                loginVisible: false
            },
            methods: {
                initProductList() {
                    let self = this;
                    $.ajax({
                        url: '/taobei_web/pro/queryAllProduct',
                        type: 'get',
                        dataType: 'json',
                        success(data) {
                            self.productList = data.data
                        }
                    })
                },
                clickBtn() {
                    alert("123")
                },
                addProductId(item){
                    //把商品id存储到session中
                    console.log(item)
                    $.ajax({
                        url: '/taobei_web/pro/addProductId',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            id: item.id
                        },
                        success(data) {
                            if (data.status == 200){
                                //跳转到商品详情页面
                                console.log("跳转页面.....")
                                location.href = './productDetails.html'
                            }
                        }
                    })
                }
            },
            mounted() {
                //页面创建时获取商品首页数据
                this.initProductList();
            }
        })
    </script>
    <script>
        $(function(){

            $('#normal').mouseover(function(){

                //鼠标移入"显示"方块
                $('#show').show();
                $('#big').css("display","block")
                $(this).mousemove(function(ev){


                    //鼠标移动方块随着移动
                    $('#show').css({

                        'left':ev.pageX-$('#show').width()/2,
                        'top':ev.pageY-$('#show').height()/2

                    })

                    //防止方块移出图片内容
                    if($('#show').offset().top>$(this).height()-$('#show').height()){

                        $('#show').css('top',$(this).height()-$('#show').height());

                    }else if($('#show').offset().left>$(this).width()-$('#show').width()){

                        $('#show').css('left',$(this).width()-$('#show').width());

                    }else if($('#show').offset().bottom>$(this).height()-$('#show').height()){

                        $('#show').css('bottom',$(this).height()-$('#show').height());

                    }else if($('#show').offset().right>$(this).width()-$('#show').width()){

                        $('#show').css('right',$(this).width()-$('#show').width());

                    }

                    //在大容器显示放大图片
                    $('#big').find('img').css({

                        'left':-1200*$('#show').offset().left/300,
                        'top':-800*$('#show').offset().top/200

                    });

                });


            });

            //鼠标移出图片让方块"消失"
            $('#normal').mouseout(function(){
                $('#big').css("display","none")
                $('#show').hide();

            });

        });
    </script>

</body>

</html>